{% extends 'base.html' %}
<html lang="pt-br"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        {% block menu %}
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right">
              
         
              
            </p>
          
            <ul class="nav">
              <li ><a href="/" id="id_link_home" >Home</a></li>
              <li><a href="/projetos" id="id_link_about">Projetos</a></li>
              <li class="active" id="id_link_equipment"> <a href="/equipamentos">Equipamentos</a></li>
            </ul>
          
          </div><!--/.nav-collapse -->
          	{% endblock %}

{% block corpo %}


<form action="/equipamentos" method="post" class="form-inline">

{% for field in formulario.visible_fields %}

 {% if field.errors %} {% endif %}
    
    
        {% for err in field.errors %} 
         <i class="alert-error">
         {{ err }} 
         </i>
        {% endfor %}
        
        {{ field.label_tag }}
         {{ field }}
    
{% endfor %}





<button class="btn btn-small btn-default"><i class="icon-ok"></i></button>
</form>





<p><p><p>

{% if equipamentos %}
<table id="list_tipos_table" class="table table-hover">
        <thead>
            <tr>
                <th class="span5">Tipo</th>
                <th class="span3" style="text-align: left;">Descricao</th>
                <th class="span3" style="text-align: center;">Altura - U</th>
                <th class="span2" style="text-align: center;">Consumo - Watts</th>
                
                
            </tr>
        </thead>
        <tbody>
{% for i in equipamentos %}


        
        
            <tr>
                <td class="span5">
                    <input id="tipo_{{ i.id}}" name="tipo_{{ i.id}}" type="text" value="" placeholder="tipo" class="input-large" style="display: none;">
                    <a onclick="tipoButton({{ i.id}});">
                        <label id="label_tipo_{{ i.id}}">
                        {{ i.nome }}
                        </label>
                    </a>
                </td>
                <td class="span5">
                    <input id="desc_{{ i.id}}" name="desc_{{ i.id}}" type="text" value="" placeholder="descricao" class="input-large" style="display: none;">
                       <label id="label_desc_{{ i.id}}">
                        {{ i.descricao }}
                        </label>
                   
                </td>
                <td class="span3" style="text-align: center;">
                    <input id="altura_{{ i.id}}" name="altura_{{ i.id}}" type="text" value="" placeholder="altura" class="altura input-mini" style="display: none;">
                    <label id="label_altura_{{ i.id}}">
               {{ i.altura }} 
                    </label>
                </td>
                <td class="span3" style="text-align: center;">
                    <input id="consumo_{{ i.id}}" name="consumo_{{ i.id}}" type="text" value="" placeholder="consumo" class="consumo input-mini" style="display: none;">
                    <label id="label_consumo_{{ i.id}}">
               {{ i.consumo }} 
                    </label>
                </td>
                <td class="span2" style="text-align: center;">
                    <div id="edit_buttons_{{ i.id}}">
                        <button class="btn" onclick="editButton({{ i.id}});"><i class="icon-edit"></i></button>
                        
                    </div>
                    <div id="update_buttons_{{ i.id}}" style="display: none">
                        <button class="btn" onclick="updateButton({{ i.id}});"><i class="icon-ok"></i></button>
                        <button class="btn" onclick="cancelButton({{ i.id}});"><i class="icon-stop"></i></button>
                    </div>
                </td>
                
                
            </tr>
        
  











{% endfor %}

    </tbody>
    </table>
    
    
    
    
   
{% endif %}
    





<script src="/templates/bootstrap/js/jquery.min.js" type="text/javascript"></script>
    <script src="/templates/bootstrap/bootstrap-modal.js"></script>
    <script src="/templates/bootstrap/bootstrap-dropdown.js"></script>
    <script src="/templates/bootstrap/bootstrap-transition.js"></script>
    <script src="/templates/bootstrap/bootstrap-alert.js"></script>
    <script src="/templates/bootstrap/bootstrap-scrollspy.js"></script>
    <script src="/templates/bootstrap/bootstrap-tab.js"></script>
    <script src="/templates/bootstrap/bootstrap-tooltip.js"></script>
    <script src="/templates/bootstrap/bootstrap-popover.js"></script>
    <script src="/templates/bootstrap/bootstrap-button.js"></script>
    <script src="/templates/bootstrap/bootstrap-collapse.js"></script>
    <script src="/templates/bootstrap/bootstrap-carousel.js"></script>
    <script src="/templates/bootstrap/bootstrap-typeahead.js"></script>

    <script src="/templates/bootstrap/shoplist_admin.js"></script>

    
    <script type="text/javascript">
    
    function tipoButton(tipo_id)
    {
        var tipo_name = $("#label_tipo_"+tipo_id).text().trim();
        $('#tipoModal').modal('show');
        
    }

    $( document ).ajaxStart( function() {
        $('#spinner').show();
    }).ajaxStop( function() {
        $('#spinner').hide();
    });

    function editButton(tipo_id)
    {
       
    	$("#label_tipo_"+tipo_id).show();
        $("#tipo_"+tipo_id).hide();
        $("#label_tipo_"+tipo_id).show();
    	$("#label_desc_"+tipo_id).hide();
        $("#desc_"+tipo_id).show();
        $("#desc_"+tipo_id).val($("#label_desc_"+tipo_id).text().trim());
        $("#label_altura_"+tipo_id).hide();
        $("#altura_"+tipo_id).show();
        $("#altura_"+tipo_id).val($("#label_altura_"+tipo_id).text().trim());
        $("#label_consumo_"+tipo_id).hide();
        $("#consumo_"+tipo_id).show();
        $("#consumo_"+tipo_id).val($("#label_consumo_"+tipo_id).text().trim());
        $("#div_consumo_"+tipo_id).show();
        var pc = $("#label_consumo_"+tipo_id).text().trim();
        pc = pc.replace("R$ ", "");
        $("#consumo_"+tipo_id).val(pc);
        $("#edit_buttons_"+tipo_id).hide();
        $("#update_buttons_"+tipo_id).show();
    }

    function cancelButton(tipo_id)
    {
    	$("#label_tipo_"+tipo_id).show();
        $("#tipo_"+tipo_id).hide();
        $("#label_tipo_"+tipo_id).show();
        $("#label_desc_"+tipo_id).show();
        $("#desc_"+tipo_id).hide();
        $("#label_altura_"+tipo_id).show();
        $("#altura_"+tipo_id).hide();
        $("#label_consumo_"+tipo_id).show();
        $("#consumo_"+tipo_id).hide();
        $("#label_consumo_"+tipo_id).show();
        $("#div_consumo_"+tipo_id).hide();
        $("#edit_buttons_"+tipo_id).show();
        $("#update_buttons_"+tipo_id).hide();
    }

    function updateButton(tipo_id)
    {
        var tipo = $("#tipo_"+tipo_id).val().trim();
        var descricao = $("#desc_"+tipo_id).val().trim();
        var altura = $("#altura_"+tipo_id).val().trim();
        var consumo = $("#consumo_"+tipo_id).val().trim();
        $.ajax(
            {
                type: "GET",
                url: "/updatetipo",
                data: "idtipo="+tipo_id+"&tipo="+tipo+"&descricao="+descricao+"&altura="+altura+"&consumo="+consumo,
                success: function(data){
        			
                	
                	 $("#label_tipo_"+tipo_id).show();
                     $("#tipo_"+tipo_id).hide();
                     $("#label_tipo_"+tipo_id).show();
                    
                    $("#desc_"+tipo_id).hide();
                    $("#label_desc_"+tipo_id).text(descricao);
                    $("#label_desc_"+tipo_id).show();
                    
                    $("#label_altura_"+tipo_id).show();
                    $("#altura_"+tipo_id).hide();
                    $("#label_altura_"+tipo_id).text(altura);
                    
                    
                    
                    $("#label_consumo_"+tipo_id).show();
                    $("#consumo_"+tipo_id).hide();
                    $("#label_consumo_"+tipo_id).text(consumo);
                    
                    $("#edit_buttons_"+tipo_id).show();
                    $("#update_buttons_"+tipo_id).hide();
                }
            });
    }

    function removeButton(tipo_id)
    {
        if (confirm('Deseja realmente deletar o tipo "'+$("#label_tipo_"+tipo_id).text().trim()+'"?')) {
            $.ajax(
                {
                    type: "GET",
                    url: "/removetipo",
                    data: "id="+tipo_id,
                    success: function(data){
                        $("#edit_buttons_"+tipo_id).parent().parent().remove();
                        var row_count = $("#list_tipos_table > tbody > tr").length;
                        if (row_count == 0)
                            $("#list_tipos_table").remove();
                    }
                });
        }
    }

    $(document).keyup(function(e)
    {
        if (e.keyCode == 27) {
            $('input[name^="tipo_"]').hide();
            $('label[id^="label_tipo_"]').show();
            
            $('input[name^="desc_"]').hide();
            $('label[id^="label_desc_"]').show();
            
            
            $('input[name^="altura_"]').hide();
            $('label[id^="label_altura_"]').show();
            $('div[id^="div_consumo_"]').hide();
            $('label[id^="label_consumo_"]').show();
            $('div[id^="edit_buttons_"]').show();
            $('div[id^="update_buttons_"]').hide();
        } // ESC pressed
    });

    $(function(){
        $('.real_currency').maskMoney({decimal:'.',thousands:''});
        $('.consumo').mask('9999');
        $('.altura').mask('99.99');
    });
    </script>

    <script src="/templates/bootstrap/js/jquery.mask.js"></script>
    <script src="/templates/bootstrap/js/jquery.maskMoney.js"></script>


{% endblock %}